@charset "utf-8";
@import "config";

@mixin over {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@mixin f_b {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@mixin f_a {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
@function w($wpx) {
    @return $wpx/640*100%;
}
$col: #d62d31;
$ts: 0.2s;
.show {
    display: block!important;
}

.container {
    .web_sec {
        bottom: setLengthByHeight(280px);
        background-color: #fff;
        .record {
            background: #f3f4f6;
            padding: 0 4%;
            border-bottom: 1px solid #C1C1C1;
            span {
                font-size: 0.6rem;
                line-height: setLengthByHeight(60px);
                
            }
        }
        nav {
            background: #FFFFFF;
            top: setLengthByHeight(64px);
            .title {
                left: 0;
                right: 0;
                text-align: left;
                padding-left: w(20);
                padding-right: w(20);
                i {
                    color: #999;
                    height: 1.5rem;
                    line-height: 1.7rem;
                    margin-top: 0.35rem;
                    position: absolute;
                    top: 0;
                    &.sou {
                        left: 6%;
                    }
                    &.guan {
                        display: none;
                        right: 2%;
                    }
                }
                input {
                    width: 100%;
                    height: setLengthByHeight(60px);
                    border-radius: 5px;
                    border: 1px solid #c1c1c1;
                    padding: 0 10%;
                }
            }
            .right {
                width: 2.5rem;
            }
            a:active,
            a:hover {
                @include highLight;
            }
        }
        & > div {
            display: none;
            padding: w(20);
            margin-top: 2.25rem;
            .hui {
                background: #f7f7f7;
            }
            .go {
                width: 80%;
                color: #666;
            }
        }
        .sec_search {
            .history {
                margin-bottom: setLengthByHeight(20px);
                .head {
                    font-size: 0.8rem;
                    line-height: setLengthByHeight(60px);
                }
                .link {
                    width: 100%;
                    margin-left: w(-8);
                    a {
                        float: left;
                        border-radius: 0;
                        color: #666;
                        margin: setLengthByHeight(8px);
                    }
                }
            }
            .empty {
                margin-top: setLengthByHeight(60px);
                text-align: center;
            }
        }
        .sec_nofound {
            text-align: center;
            height: 100%;
            padding-top: setLengthByHeight(100px);
            position: relative;
            i {
                font-size: 5rem;
                color: #ccc;
            }
            p {
                font-size: 0.8rem;
                color: #666;
            }
            a {
                margin-top: setLengthByHeight(40px);
            }
            .foot {
                background: #f2f2f2;
                position: absolute;
                top: 19rem;
                left: 0;
                right: 0;
                bottom: 0;
                .back {
                    height: setLengthByHeight(90px);
                    line-height: setLengthByHeight(90px);
                    border-bottom: 1px solid #e0e0e0;
                    margin-bottom: setLengthByHeight(50px);
                    a {
                        color: #666;
                        font-size: 0.6rem;
                        margin: 0 w(20);
                    }
                }
                img {
                    width: setLengthByHeight(200px);
                }
            }
        }
        .sec_sell {
            .goods {
                & > li {
                    position: relative;
                    padding: 0 w(20);
                    transition: $ts;
                    &:not(:last-child) {
                        border-bottom: 1px solid #e0e0e0;
                    }
                    &:active,
                    &:hover {
                        background: #fafafa;
                    }
                    & > a {
                        display: block;
                        width: 100%;
                        height: 120px;
                        padding: 10px 0 10px 110px;
                        transition: $ts;
                        position: relative;
                        .ckd {
                            display: none;
                            position: absolute;
                            top: 10px;
                            left: 0;
                            font-size: 1rem;
                            line-height: 100px;
                            color: #333;
                            transition: $ts;
                            &.icon-gou {
                                color: $col;
                            }
                        }
                        figure {
                            width: 100px;
                            height: 100px;
                            position: absolute;
                            top: 10px;
                            left: 0;
                            transition: $ts;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        & > p {
                            height: 40px;
                            line-height: 20px;
                            font-size: 0.7rem;
                            color: #333;
                            overflow: hidden;
                            word-break: break-all;
                            text-align: justify;
                        }
                        .in_pr {
                            font-size: 0.5rem;
                            color: #999;
                            line-height: 40px;
                            @include over;
                            p {
                                display: inline;
                                margin-right: 3%;
                                @include over;
                            }
                            i {
                                font-size: 0.5rem;
                            }
                        }
                        .price {
                            margin-top: 0.5rem;
                            line-height: 18px;
                            font-size: 0.5rem;
                            color: #999;
                            @include over;
                            i,
                            span {
                                color: $col;
                                font-size: 0.7rem;
                            }
                        }
                        &.pd_l {
                            padding-left: 135px;
                            figure {
                                left: 25px;
                            }
                        }
                    }
                    .more {
                        color: $col;
                        font-size: 1.2rem;
                        position: absolute;
                        right: w(20);
                        bottom: 10px;
                    }
                    .more_menu {
                        display: none;
                        width: w(600);
                        font-size: 0.6rem;
                        color: #fff;
                        text-align: center;
                        background: rgba(0,0,0,0.8);
                        border-radius: 5px;
                        box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
                        padding: 0.5rem 0;
                        position: absolute;
                        right: w(10);
                        bottom: 2.6rem;
                        z-index: 3;
                        li {
                            a {
                                display: block;
                                color: #fff;
                            }
                            float: left;
                            width: 20%;
                            i {
                                font-size: 1.3rem;
                            }
                        }
                        & > i {
                            width: 0;
                            height: 0;
                            border-top: 0.4rem solid rgba(0,0,0,0.6);
                            border-left: 0.4rem solid transparent;
                            border-right: 0.4rem solid transparent;
                            text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
                            position: absolute;
                            right: w(15);
                            bottom: -0.35rem;
                            &::before {
                                visibility: hidden;
                            }
                        }
                    }
                    .shade {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: 2;
                    }
                }
            }
            padding: 0;
            & > p {
                height: setLengthByHeight(40px);
                line-height: setLengthByHeight(40px);
                font-size: 0.6rem;
                background: #f2f2f2;
                padding: 0 w(20);
            }
        }
    }
    
    footer{
        .foot {
                height: setLengthByHeight(280px);
                background: #f2f2f2;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                text-align: center;
                .back {
                    height: setLengthByHeight(90px);
                    line-height: setLengthByHeight(90px);
                    border-bottom: 1px solid #e0e0e0;
                    margin-bottom: setLengthByHeight(50px);
                    a {
                        color: #666;
                        font-size: 0.6rem;
                        margin: 0 w(20);
                    }
                }
                img {
                    display: block;
                    width: setLengthByHeight(200px);
                    margin: 0 auto;
                }
            }
    }
}

.layer {
    .dialog {
        .icon_list {
            .item {
                .icon-weixin {
                    background-color: #85d16d;
                }

                .icon-pengyouquan {
                    background-color: #6dd193;
                }

                .icon-weibo {
                    background-color: #f26868;
                }

                .icon-QQ {
                    background-color: #4c88f5;
                }

                .icon-qqkongjian {
                    background-color: #f0c759;
                }

                .icon-shouji {
                    background-color: #54d3b1;
                }

                .icon-liuyan1 {
                    background-color: #ff936d;
                }

                .icon-erweima {
                    color: #000000;
                    border: setLengthByHeight(4px) solid #dde0de;
                    background-color: #ffffff;
                }

                .icon-fuzhilianjie {
                    background-color: #a8bcc8;
                }

                .icon-shichang {
                    background-color: #82cf4f;
                }
            }
        }
    }
}
